<template>
  <div class="dashboard-container" style="font-size: 30px;">
    {{ msg }}
    <hr>
    <el-button style="margin-top: 12px;" @click="apply">申请信息</el-button>

    <!-- 主对话框 -->
    <el-dialog :visible.sync="dialogVisible" width="800px" :title="title" append-to-body>
      <el-steps :active="active" align-center style="margin-bottom: 60px">
        <el-step title="员工信息"></el-step>
        <el-step title="账户信息"></el-step>
      </el-steps>

      <!-- 步骤1: 员工基本信息 -->
      <div v-if="active === 0">
        <el-form :model="formData" label-width="100px" ref="formStep1">
          <el-form-item label="员工名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入员工全名" clearable />
          </el-form-item>
          <el-form-item label="员工性别" prop="sex">
            <el-select v-model="formData.sex" placeholder="请选择性别">
              <el-option
                v-for="item in sexOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="员工地址" prop="address">
            <el-input v-model="formData.address" placeholder="请输入详细地址" clearable />
          </el-form-item>
          <el-form-item label="员工手机" prop="iphone">
            <el-input v-model="formData.iphone" placeholder="请输入11位手机号" maxlength="11" clearable />
          </el-form-item>
          <el-form-item label="所属部门" prop="departmentId">
            <el-select
              v-model="formData.departmentId"
              placeholder="请选择部门"
              filterable
              style="width:100%"
            >
              <el-option
                v-for="dept in departmentOptions"
                :key="dept.id"
                :label="dept.name"
                :value="dept.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <!-- 步骤2: 账户信息 -->
      <div v-else>
        <el-table
          :data="tableData"
          ref="userTable"
          @selection-change="handleSelectionChange"
          style="width: 100%; margin-top: 15px;"
          height="300"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="序号" width="120" align="center"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
            <template slot-scope="scope">
              <span style="color: #409eff; font-weight: bold;">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="日期" width="180" sortable></el-table-column>
          <el-table-column prop="gender" label="性别" width="100" align="center">
            <template slot-scope="scope">
              <el-tag :type="scope.row.gender === '男' ? 'primary' : 'danger'">{{ scope.row.gender }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="100" align="center" sortable></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
          <el-table-column prop="status" label="状态" width="120" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === '在职'" type="success">在职</el-tag>
              <el-tag v-else-if="scope.row.status === '离职'" type="info">离职</el-tag>
              <el-tag v-else type="warning">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="填写配置信息" width="150" align="center">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="handleEdit(scope.row)"
                :disabled="scope.row.status !== '在职'"
              >
                配置信息
              </el-button>
<!--              <el-tag v-if="configData[scope.row.id]" type="success" size="small" style="margin-left: 5px">-->
<!--                已配置-->
<!--              </el-tag>-->
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div style="text-align: center; margin-top: 30px">
        <el-button
          @click="prevStep"
          :disabled="active === 0"
        >
          上一步
        </el-button>

        <el-button
          type="primary"
          @click="nextStep"
          :disabled="active === 1"
        >
          下一步
        </el-button>
        <el-button
          type="primary"
          @click="submitForm"
          :disabled="active !== 1"
        >
          提交
        </el-button>
      </div>
    </el-dialog>

    <!-- 配置信息对话框 -->
    <el-dialog
      :visible.sync="dialogVisiblePeizhi"
      width="500px"
      :title="configDialogTitle"
      append-to-body
      @close="resetConfigForm"
    >
      <el-form :model="currentConfig" label-width="100px" ref="configForm">
        <el-form-item label="员工工号" prop="jobId">
          <el-input
            v-model="currentConfig.jobId"
            placeholder="请输入员工工号"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="工作年限" prop="year">
          <el-input-number
            v-model="currentConfig.year"
            :min="0"
            :max="50"
            controls-position="right"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisiblePeizhi = false">取 消</el-button>
        <el-button type="primary" @click="saveConfig">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  data() {
    return {
      msg: '员工信息管理',
      dialogVisible: false,
      dialogVisiblePeizhi: false,
      active: 0,
      title: '员工信息申请',
      configDialogTitle: '配置员工信息',

      // 表单数据
      formData: {
        name: '',
        sex: '',
        address: '',
        iphone: '',
        departmentId: '',
        // 配置信息
        peiZhiItem: [],
        tableItem: []
      },

      // 当前正在配置的员工信息
      currentConfig: {
        id: '',
        jobId: '',
        year: 0
      },

      // 所有配置信息存储
      configData: {},

      tableData: [
        {
          id: 'A001',
          name: '张三',
          date: '2023-06-15',
          gender: '男',
          age: 28,
          address: '北京市朝阳区建国门外大街1号',
          status: '在职'
        },
        {
          id: 'A002',
          name: '李四',
          date: '2023-07-22',
          gender: '男',
          age: 32,
          address: '上海市浦东新区张江高科技园区',
          status: '在职'
        },
        {
          id: 'A003',
          name: '王芳',
          date: '2023-05-10',
          gender: '女',
          age: 25,
          address: '广州市天河区珠江新城',
          status: '在职'
        },
        {
          id: 'A004',
          name: '陈明',
          date: '2023-04-18',
          gender: '男',
          age: 45,
          address: '深圳市南山区科技园南区',
          status: '离职'
        },
        {
          id: 'A005',
          name: '刘婷',
          date: '2023-08-30',
          gender: '女',
          age: 29,
          address: '杭州市西湖区文三路',
          status: '在职'
        }
      ],

      // 性别选项
      sexOptions: [
        { label: '男', value: 'male' },
        { label: '女', value: 'female' },
        { label: '其他', value: 'other' }
      ],

      // 部门选项
      departmentOptions: [
        { id: 1, name: '技术研发部' },
        { id: 2, name: '市场营销部' },
        { id: 3, name: '人力资源部' },
        { id: 4, name: '财务管理部' },
        { id: 5, name: '客户服务部' }
      ],

      // 表格选中的行ID
      tableSelectionId: [],
      // 配置弹窗的信息

    };
  },
  methods: {
    // 打开配置对话框
    handleEdit(row) {
      this.currentConfig = {
        id: row.id,
        jobId: this.configData[row.id]?.jobId || '',
        year: this.configData[row.id]?.year || 0
      };
      this.dialogVisiblePeizhi = true;

      console.log("==========this.currentConfig===========>",this.currentConfig)
    },


    // 重置配置表单
    resetConfigForm() {
      this.currentConfig = {
        id: '',
        name: '',
        jobId: '',
        year: 0
      };
    },
    // 保存配置信息
    saveConfig() {
      this.$refs.configForm.validate(valid => {
        if (valid) {
          // // 保存配置信息
          // this.$set(this.configData, this.currentConfig,{
          //   jobId: this.currentConfig.jobId,
          //   year: this.currentConfig.year
          // });
          this.formData.peiZhiItem.push({
            jobId: this.currentConfig.jobId,
            year: this.currentConfig.year
          });

          this.$message.success('配置信息已保存');
          this.dialogVisiblePeizhi = false;
        }
      });
    },

    // 表格选择变化
    handleSelectionChange(selection) {
      this.tableSelectionId = selection.map(item => item.id);
    },

    // 打开主对话框
    apply() {
      this.dialogVisible = true;
      this.active = 0;
      this.title = '员工信息申请';
      this.formData = {
        name: '',
        sex: '',
        address: '',
        iphone: '',
        departmentId: '',
        peiZhiItem: [],  // 保留初始结构
        tableItem: []    // 保留初始结构

      };
      this.tableSelectionId = [];
      this.configData = {};
    },

    // 上一步
    prevStep() {
      if (this.active > 0) {
        this.active--;
        this.title = '员工信息申请';
      }
    },

    // 下一步
    nextStep() {
      this.$refs.formStep1.validate(valid => {
        if (valid) {
          this.active = 1;
          this.title = '账户信息设置';
        }
      });
    },

    // 提交表单
    submitForm() {

      // // 准备提交数据 - 完全匹配后端结构
      // const submitData = {
      //   ...this.formData,
      //   peiZhiItem: this.formData.peiZhiItem, // 保持数组格式
      //   tableItem: [this.tableSelectionId] // 必须包裹在数组中
      // };
      //
      // console.log('提交数据:', submitData);

      // 准备提交数据
      this.formData.tableItem.push(this.tableSelectionId);
      // 这里应该是API请求
      console.log('提交数据:', this.formData);
      this.$message.success('信息提交成功');
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 30px;

  .el-dialog {
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);

    .el-form-item {
      margin-bottom: 22px;
    }

    .el-step__title {
      font-size: 14px;
    }
  }

  .el-table {
    margin-top: 15px;
  }
}
</style>
